<template name="dingjin">		
	<view class="place-mianya" :style="$s.view_color">
	  <view class="mianya-header">
	    <text class="t1">选择支付方式</text>
	  </view>
	  <view class="options">
			<view class="option zhifu" @click="select(0)" :class="pay_mode==0?'on':''">
				<text class="title">全款支付</text>
				<text class="subtitle">￥{{money.real_money}}</text>
			</view>
			<view class="option zhimaxinyong" @click="select(1)" :class="pay_mode==1?'on':''">
			  <text class="title">订金支付</text>
			  <text class="subtitle">订金：￥{{money.retainer_first_fee}}</text>
			  <text class="subtitle">尾款：￥{{money.retainer_last_fee}}</text>
			</view>
	  </view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'dingjin',
		props: {
			money:{
				type:[Object],
				default:{},
			},
		},
		data() {
			return {
				pay_mode:0,
			};
		},
		watch: {
		},
		computed: {
			...mapState({
				start_date:state => state.$startDate,
				end_date:state => state.$endDate,
				carid:state => state.$carID,
				$config:state => state.$config,
				$s:state => state.$style,
			})
		},
		methods: {
			// 选中类型
			select(s){
				this.pay_mode=s;
				this.$emit('select',s);
			}
		}
	};
</script>

<style lang="scss">
	
	.place-mianya {
	  margin: 0 32rpx 32rpx;
	  padding: 32rpx;
	  background-color: #fff;
	  border-top-left-radius: 20rpx;
	  border-top-right-radius: 20rpx;
	  .mianya-header {
	      display: flex;
	      width: 100%;
	      margin-bottom: 32rpx;
	      font-weight: 700;
	      font-size: 30rpx;
	  }
	  .options {
	    display: flex;
	    justify-content: space-between;
	    margin-top: 32rpx; // 根据需要调整间隔
	    .option {
	      display: flex;
	      flex-direction: column;
	      align-items: center;
		  justify-content:center;
	      width: 50%; // 使两个选项等宽
	      padding: 10rpx;
	      border-radius: 20rpx; // 圆角的大小
		  border: 5rpx solid $u-border-color;
		  background-color: #FFF;
	      &:first-child {
	        margin-right: 16rpx; // 两个选项之间的间隔
	      }
	
	      .icon {
	        // 假设您已经有一个图标的背景图片
	        width: 60rpx;
	        height: 60rpx;
	        background-size: cover;
	        background-position: center;
	        margin-bottom: 10rpx;
	      }
	
	      .title {
	        font-size: 28rpx; // 根据设计调整
	        margin-bottom: 5rpx;
	      }
	
	      .subtitle {
			color:#00A378;
	        font-size: 26rpx; // 根据设计调整
	      }
	    }
		.on{
			border: 5rpx solid #00CF97;
			background-color: #EBF7F4;
		}
	    
	    .zhimaxinyong {
	      .icon {
	        background-image: url('@/static/images/icon-zhima.png'); // 芝麻信用图标路径
	      }
	      // 适当的样式...
	    }
	
	    .zhifu {
	      .icon {
	        background-image: url('@/static/images/icon-zfb.png'); // 支付押金图标路径
	      }
	      // 适当的样式...
	    }
	  }
	}

</style>
